<script lang="ts" setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";

const safeAreaHeight = ref(0)
const capsuleHeight = ref(0)
onLoad(() => {
  safeAreaHeight.value = uni.getMenuButtonBoundingClientRect().top
  capsuleHeight.value = uni.getMenuButtonBoundingClientRect().height
})

const navigateBack = () => {
  uni.navigateBack()
}
</script>

<template>
  <view @click="navigateBack" class="outside" :style="{ width: 2 * capsuleHeight + 'rpx', height: 2 * capsuleHeight + 'rpx', marginTop: 2 * safeAreaHeight + 'rpx' }">
    <wd-icon name="thin-arrow-left" size="32rpx" />
  </view>
</template>

<style scoped lang="scss">
.outside {
  background-color: white;
  position: fixed;
  z-index: 1;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20%;
  box-shadow:
      4rpx 4rpx 8rpx rgb(128, 128, 128, 0.1),
      -4rpx 4rpx 8rpx rgb(128, 128, 128, 0.1),
      4rpx -4rpx 8rpx rgb(128, 128, 128, 0.1),
      -4rpx -4rpx 8rpx rgb(128, 128, 128, 0.1);
}
</style>
